﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>
    <script src="js/sammy.js"></script>

    <link href="css/webmail.css" rel="stylesheet" />
    <script type="text/javascript">
        function WebmailViewModel() {
            // -------------------------------------------------
            // Data
            // -------------------------------------------------
            var self = this;
            self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
            self.chosenFolderId = ko.observable();
            self.chosenFolderData = ko.observable();
            self.chosenMailData = ko.observable();

            // -------------------------------------------------
            // Behaviours
            // -------------------------------------------------
            self.goToFolder = function (folder, e) {
                //console.log('goToFolder', folder, e);
                self.chosenFolderId(folder);
                self.chosenMailData(null);      // Stop showing a mail
                $.get('service/mail.ashx', { folder: folder }, self.chosenFolderData);
                console.log(self.chosenFolderData);
            };
            self.goToMail = function (mail) {
                //self.chosenFolderId(mail.folder);
                self.chosenFolderData(null);    // Stop showing a folder
                $.get("service/mail.ashx", { mailId: mail.id }, self.chosenMailData);
            };
        };

        var vmMail = null;
        $(function () {
            // Activates knockout.js
            vmMail = new WebmailViewModel();
            vmMail.goToFolder('Inbox');
            ko.applyBindings(vmMail);
        });
    </script>
</head>
<body>
    <!-- Folders -->
    <ul class="folders" data-bind="foreach: folders">
        <li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>
    </ul>

    <!-- Mails grid -->
    <table class="mails" data-bind="with: chosenFolderData">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: mails">
            <tr data-bind="click: $root.goToMail">
                <td data-bind="text: from"></td>
                <td data-bind="text: to"></td>
                <td data-bind="text: subject"></td>
                <td data-bind="text: date"></td>
            </tr>
        </tbody>
    </table>

    <!-- Chosen mail -->
    <div class="viewMail" data-bind="with: chosenMailData">
        <div class="mailInfo">
            <h1 data-bind="text: subject"></h1>
            <p>
                <label>From</label>: <span data-bind="text: from"></span>
            </p>
            <p>
                <label>To</label>: <span data-bind="text: to"></span>
            </p>
            <p>
                <label>Date</label>: <span data-bind="text: date"></span>
            </p>
        </div>
        <p class="message" data-bind="html: messageContent" />
    </div>
</body>
</html>